<template>
<li class="side-menu-box">
  <div v-for="menu in menus" :key="menu.flag">
    <el-menu-item v-if="!menu.children" :index="menu.flag" @click="selectMenu(menu)">
      {{ menu.name }}
    </el-menu-item>

    <el-submenu v-if="menu.children" :index="menu.flag">
      <template slot="title">
        <span>{{ menu.name }}</span>
      </template>
      <side-menu :menus="menu.children"></side-menu>
    </el-submenu>
  </div>
</li>
</template>

<script>
export default {
  name: 'sideMenu',
  data() {
    return {};
  },
  props: {
    menus: {
      type: Array,
    },
  },
  methods: {
      selectMenu(v) {
          this.$tab.add({
            title: v.name,
            flag: v.flag,
            _from: 'menu', // 从菜单触发的add动作，不会触发tab刷新
          });
      },
  },
};
</script>
